<template>
    <view @click="hide">
        <view class="infobox-mask" @tap="close"></view>
        <view class="infobox-popup infobox-popup-middle ">
            <view class="infobox-top">
                <view class="infobox-top-text">
                    <view class="infobox-top-text-row1">{{title.titleRow1}}</view>
                    <view class="infobox-top-text-row2">{{title.titleRow2}}</view>
                </view>
                <view class="infobox-top-closebox" @tap="close">
                    <image src="../../static/ibs/img_comm_close.png" mode=""></image>
                </view>
            </view>
            <view class="infobox-top-line"></view>
            <view class="input-box">
                <view class="input-row-box">
                    <text>姓　　名</text>
                    <input type="text" maxlength="10" v-model="data.contactName" value=""/>
                </view>
                <view class="input-row-box letter-spacing">
                    <text>手 机 号</text>
                    <input type="text" v-model="data.contactMobileNo" value="" @blur="checkInput()"/>
                </view>
                <view class="input-row-box">
                    <text>公司名称</text>
                    <input type="text" maxlength="25" value="" v-model="data.companyName" placeholder="选填"
                           placeholder-class="input-row-placeholder"/>
                </view>
            </view>
            <view class="infobox-btn-box">
                <button type="" @tap="saveUser">保存</button>
            </view>
        </view>
    </view>
</template>

<script>
    import validate from "@/common/graceChecker.js";
    import api from '@/common/api.js';   //请求API方法
	import { validateTips } from '@/common/checkerMessage.js';
		import enums from '@/common/sysEnum.js';
    export default {
        props: ['title', 'remoteUrl','infoType','demandId'],
        data() {
            return {
                data: {
                    companyName: null,
                    contactMobileNo: null,
                    contactName: null
                }

            };
        },
        methods: {
            close() {
                this.$emit('closeInfo', 'infoBox');
            },
            saveUser() {
                var that = this;
                let validate = that.checkData();
                let checkInputVal = that.checkInput();
				 //	let userInfo = that.$store.getters.getUserInfo; //从缓存获取用户的个人信息数据
				if (!validate || !checkInputVal) {
				    return;
				}
                var params = that.data;
                api.httpRequest(that.remoteUrl, params, "post",true).then((res) => {
                    //调用获取微信及用户信息方法
                    if (res.code == 200) {
                        that.getUserInfo().then(res => {
                            //如果获取成功，跳转到首页列表
                            uni.showToast({
                                icon: "none",
                                title: "资料保存成功!"
                            });
                            that.$parent.isShowInfoBox = false;
							if(that.infoType==1){
								that.$parent.isShowQuoteBox = true;
							}else if(that.infoType==2){
								uni.navigateTo({
								    url: '/pages/demand/buyInfo'
								});
							}else if(that.infoType==3){
								that.$parent.isShowpayBox = true;
							}
                        });
                    }
                });
            },
            checkData() {
                if (this.data.contactName == '' || this.data.contactName == undefined) {
                    uni.showToast({
                        icon: 'none',
                        title: '姓名不能为空'
                    })
                    return false;
                }
                if (this.data.contactMobileNo == '' || this.data.contactMobileNo == undefined) {
                    uni.showToast({
                        icon: 'none',
                        title: '手机号不能为空'
                    })
                    return false;
                }
                return true;
            },
            checkInput() {
				if (!validate.checkContactNumber({
						message: validateTips.FILL_RIGHT_CONTACT_PHONE,
						nullAble: true
					}, this.data.contactMobileNo, this.showError)) {
					return;
				}else{
					return true;
				}
            }
        }
    }
</script>

<style scoped="">
    .infobox-mask {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
    }

    .infobox-popup {
        position: absolute;
        z-index: 999;
        background-color: #ffffff;
        box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
    }
	.letter-spacing{
		letter-spacing: 3upx;
	}
    .infobox-popup-middle {
        width: 600upx;
        height: 620upx;
        border-radius: 8upx;
        top: 50%;
        left: 50%;
        position: fixed;
        overflow: hidden;
        transform: translate(-50%, -50%);
    }

    .button-bottom {
        position: absolute;
        width: 100%;
        height: 88upx;
        line-height: 88upx;
        bottom: 0;
        left: 0;
    }

    .button-bottom .btn-cancel {
        width: 50%;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        font-size: 28upx;
        background: #B2B2B2;
    }

    .button-bottom .btn-blue {
        width: 50%;
        display: inline-block;
        font-size: 28upx;
        background: #179AFF;
        height: 88upx;
        line-height: 88upx;
        border-radius: 0;
        border: none;
        color: #fff;
    }

    .share-tips {
        text-align: center;
        font-size: 30upx;
        margin-top: 90upx;
    }

    .shareBoxCon .close-icon {
        position: absolute;
        top: 20upx;
        right: 20upx;
        width: 80upx;
        height: 40upx;
        font-size: 32upx;
        line-height: 40upx;
    }

    .infobox-top {
        padding-left: 30upx;
        padding-top: 20upx;
        height: 126upx;
        display: flex;
        justify-content: space-between;
    }

    .infobox-top-text {
        font-size: 28upx;
        color: #1A1A1A;
        margin-top: 10upx;
    }

    .infobox-top-text-row2 {
        padding-top: 16upx;

    }

    .infobox-top-closebox {
        padding-right: 20upx;
        width: 36upx;
        height: 36upx;
    }

    .infobox-top-closebox image {
        width: 36upx;
        height: 36upx;
    }

    .infobox-top-line {
        border-bottom: #E5E5E5 1upx solid;
        height: 1upx;

    }

    .input-box {
        padding-left: 30upx;
        padding-top: 20upx;
        padding-right: 30upx;
        padding-bottom: 60upx;
    }

    .input-row-box {
        display: flex;
        justify-content: flex-start;
        padding-top: 20upx;
        align-items: center;
        height: 60upx;
        line-height: 60upx;
    }

    .input-row-box text {
        width: 160upx;
        font-size: 28upx;
        color: #1A1A1A;
        height: 60upx;
        line-height: 60upx;
		padding-right: 20upx;
    }

    .input-row-box input {
  
        padding-left: 20upx;
        border: #E5E5E5 1upx solid;
        border-radius: 15upx;
        font-size: 28upx;
        width: 100%;
        height: 60upx;
        line-height: 60upx;

    }

    .infobox-btn-box button {
        width: 460upx;
        background: #077131;
        color: #FFFFFF;
        font-size: 34upx;
        height: 88upx;
        line-height: 88upx;
        border-radius: 44upx;
    }

    .input-row-placeholder {
        font-size: 28upx;
        color: #B2B2B2;

    }
</style>
